<template>
    <div style="margin-left: 20px;width: 90vw">
        <div class="divmargin">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="商品编号">
                    <el-input v-model="id"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit()">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table
                    :data="stockData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="商品编号">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="商品名称">
                    <template slot-scope="scope">
                        <el-input placeholder="名称不能为空" type="text" v-model="scope.row.name"/>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格"
                        width="140px">
                    <template slot-scope="scope">
                        <el-input placeholder="价格不能为空" type="text" v-model="scope.row.price"/>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="saleprice"
                        label="折扣商品价"
                        width="130px">
                    <template slot-scope="scope">
                        <el-input placeholder="商品不打折" type="text" v-model="scope.row.saleprice"/>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="stock"
                        label="库存">
                    <template slot-scope="scope">
                        <el-input type="text" v-model="scope.row.stock"/>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="newcommodity"
                        label="是否新品">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.newcommodity">
                            <el-option v-for="s in sf"
                                       :key="s"
                                       :label="s.name"
                                       :value="s.va">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="membercommodity"
                        label="是否会员">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.membercommodity">
                            <el-option v-for="s in sf"
                                       :key="s"
                                       :label="s.name"
                                       :value="s.va">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="状态"
                        width="140px">
                    <template slot-scope="scope">
                        <el-select disabled v-model="scope.row.state">
                            <el-option v-for="s in sta"
                                       :key="s"
                                       :label="s.statename"
                                       :value="s.state">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="updCom(scope.row)" type="text">更新</el-button>
                        <el-button @click="updSta(scope.row)" type="text">下架</el-button>
                        <el-button @click="" type="text">添加图片 </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="block">
                <el-pagination
                        @current-change="toPage"
                        layout="prev, pager, next"
                        :total="currentPageCount"
                        :current-page="currentPageNo"
                        :page-size="6">
                </el-pagination>
            </div>

            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <span>
                    <el-form label-width="100px" class="demo-ruleForm">
                <el-form-item label="下架原因：">
                    <el-input type="textarea"
                              :rows="3"
                              placeholder="请输入原因"
                              v-model="sto.because">
                    </el-input>
                </el-form-item>
                        <!--<el-input v-model="sto.commodityname"></el-input>-->
            </el-form>
                </span>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updSto()">确 定</el-button>
  </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Selstock",
        data() {
            return {
                dialogVisible: false,
                sto: {
                    commodityname: '',
                    storeid: '1',
                    because: '',
                    joinstocked: '',
                    stock: ''
                },
                xia: {
                    id: '',
                    state: '',
                    stock: ''
                },
                stockData: [{
                    id: '2233',
                    name: '2233',
                    price: '2233',
                    saleprice: '',
                    stock: '2233',
                    newcommodity: '0',
                    membercommodity: '0',
                    state: '1',
                    storeid: '1'
                }],
                sta: [{statename: '商品已下架', state: 0}, {statename: '商品已上架', state: 1}],
                sf: [{name: '否', va: 0}, {name: '是', va: 1}],
                id: '',
                //当前的页码
                currentPageNo: 1,
                //最大页码
                currentPageCount: 1
            }
        }
        , beforeRouteEnter(to, from, next) {
            next(vm => {
                //在此处vm表示vue组件对象
                vm.loadData1();
            });
        },
        methods: {
            toPage: function (num) {
                this.currentPageNo = num;
                this.loadData1();
            },
            loadData1: function () {
                this.axios.get("/selectAllCom", {
                    params: {
                        pageNo: this.currentPageNo, pageSize: 6, storeid: 1, state: 1
                    }
                })
                    .then((response) => {
                        this.stockData = response.data.data;
                        this.currentPageCount = response.data.pageCount;
                    })
            },
            //点击查询按钮查询
            onSubmit: function () {
                if (this.id == null || this.id == '') {
                    this.loadData1();
                } else {
                    this.axios.get("/selectListComById", {
                        params: {
                            id: this.id
                        }
                    })
                        .then((response) => {
                            this.stockData = response.data
                        })
                }
            },
            //商品更新
            updCom: function (row) {
                var s = row.saleprice;
                if (s == null || s == "") {
                    row.saleprice = '0';
                }

                this.axios.post("/updcomd", row)
                    .then((response) => {
                        if (response.data == 1) {
                            this.$message({
                                message: '更新成功',
                                type: 'success'
                            });
                        } else {
                            this.$message.error('更新失败');
                        }
                    })
                this.loadData1();
            },
            updSta: function (row) {
                this.sto.stock = row.stock;
                this.sto.commodityname = row.name;
                this.sto.storeid = 1;
                this.sto.joinstocked = 0;
                this.xia.id = row.id;
                this.xia.state = 0;
                this.xia.stock = 0;
                this.dialogVisible = true;
            },
            updSto: function () {
                var da = 0;
                this.xia.stock = 0;
                this.axios.post("/updcomd", this.xia)
                    .then((response) => {
                        da = response.data;
                    })


                this.axios.post("/updStockBecd", this.sto)
                    .then((response) => {
                        da = response.data;
                    })

                setTimeout(() => {
                    if (da == 1) {
                        this.$message({
                            message: '更新成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('更新失败');
                    }
                }, 2000);


                this.dialogVisible = false;
                this.loadData1();
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(response => {
                        done();
                        alert(response);
                    })
                    .catch(error => {
                        alert(error);
                    });
            }
        }
    }
</script>

<style scoped>
    .divmargin {
        margin-left: 25%;
        margin-top: 5%;
    }
</style>